<div class = "ui modal small" id="connect">
    <i class = "close icon"></i>
    <div class = "header">
        表关联
    </div>
    <div class = "image content" style="width: 100%;">
        <div id = "" class = "tableConnect" style="width: 100%;" >
            <div class = "connect-img">
                <div style="max-width:60px" ng-class = "{'column-item' : true,cp : true,leftJoin : true,active : joinType == 'leftJoin'}" title = "左连接" ng-click = "joinType = 'leftJoin'"></div>
                <div style="max-width:60px" ng-class = "{'column-item' : true,cp : true,innerJoin : true,active : joinType == 'innerJoin'}" title = "中间连接" ng-click = "joinType = 'innerJoin'"></div>
                <div style="max-width:60px" ng-class = "{'column-item' : true,cp : true,rightJoin : true,active : joinType == 'rightJoin'}" title = "右连接" ng-click = "joinType = 'rightJoin'"></div>
                <div style="max-width:60px" ng-class = "{'column-item' : true,cp : true,outerJoin : true,active : joinType == 'outerJoin'}" title = "外连接" ng-click = "joinType = 'outerJoin'"></div>
            </div>
            <div class="content">
                <div class="leftTableR mt10">
                    <div style="margin-bottom: 5px;">
                        <span class="ui sub header mr10">左表-{{table1.value.tableName}}</span>
                        <div class="ui checkbox selectTable">
                            <input type="checkbox">
                            <label>全选</label>
                        </div>
                    </div>
                    <div class="ui checkbox mr10" ng-repeat="item in table1.filed" ng-show="item.isShow">
                        <input type="checkbox" ng-model="item.isSelected">
                        <label style="max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{item.columnDesc}}</label>
                    </div>

                </div>
                <div class="rightTableR mt10">
                    <div style="margin-bottom: 5px;">
                        <span class="ui sub header mr10">右表-{{table2.value.tableName}}</span>
                        <div class="ui checkbox selectTable">
                            <input type="checkbox">
                            <label>全选</label>
                        </div>
                    </div>
                    <div class="ui checkbox mr10" ng-repeat="item in table2.filed" ng-show="item.isShow">
                        <input type="checkbox" ng-model="item.isSelected">
                        <label style="max-width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap">{{item.columnDesc}}</label>
                    </div>
                </div>
            </div>
            <div class = "connect-filed">
                <div class="ui form small">
                    <div class="fields" ng-repeat = "index in dataSum track by $index" style="margin-top: 10px;">
                        <div class="inline field">
                            <label>左表字段</label>
                            <select class="ui fluid" ng-model="dataFileds[$index].left" style="min-width:100px;max-width: 180px;overflow: auto;">
                                <option value="{{filed.columnDesc}}" ng-repeat="filed in table1.filed" ng-show="filed.isShow">{{filed.columnDesc}}</option>
                            </select>
                            <!--<select class="ui fluid" ng-model="dataFileds[$index].left" ng-change="selectCount($index)" ng-options="filed.columnDesc as filed.columnDesc for filed in table1.filed"  style="min-width:100px;max-width: 180px;overflow: auto;">-->
                            <!--</select>-->
                        </div>
                        <div class="inline field">
                            <label>右表字段</label>
                            <select class="ui fluid" ng-model="dataFileds[$index].right" style="min-width:100px;max-width: 180px;overflow: auto;">
                                <option value="{{filed.columnDesc}}" ng-repeat="filed in table2.filed" ng-show="filed.isShow">{{filed.columnDesc}}</option>
                            </select>
                            <!--<select class="ui fluid" ng-model="dataFileds[$index].right" ng-options="filed.columnDesc as filed.columnDesc for filed in table2.filed"  style="min-width:100px;max-width: 180px;overflow: auto;">-->
                            <!--</select>-->
                        </div>
                        <div class="inline field" style="font-size: 1em;line-height: 3em;" >
                            <i class = "minus circle icon cp" ng-click = "lessSum($index)"></i>
                            <i class = "add circle icon cp" ng-click = "addSum($index)" ng-show="$last"></i>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style = "color: red;padding: 10px;" ng-show="msg">提示：{{msg}}</div>
    <div class = "actions">
        <button class = "ui button default" ng-click = "cancel()">取消</button>
        <button class = "ui button red" ng-click = "ok()">关联</button>
    </div>
    <div class="ui negative uncheck button" style="display: none;">Uncheck</div>
</div>